<!--
 * @Author: HZH
 * @Date: 2021-09-17 16:11:30
 * @LastEditors: HZH
 * @LastEditTime: 2021-09-23 19:58:14
 * @Description: 
-->
<template>
  <div class="Home">
    <div class="bg">
      <div class="header">
      <div class="header_top">
        <div class="wrapper">
          <div class="left">
            <img src="../../../public/indexlogo.png" alt="" @click="ToHome">
          </div>
          <div class="right">
            <div class="right_top">
              <ul>
                <li><el-button type="text" @click="open" style="color: #fff;">领导信箱</el-button></li>
                <li><el-button type="text" @click="wait" style="color: #fff;">English</el-button></li>
                <li><el-button type="text" @click="wait" style="color: #fff;">快速登陆</el-button></li>
              </ul>
            </div>
            <div class="slogan">
              <img src="../../../public/txt.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="header_bottom">
        <div class="wrapper">
          <ul>
            <li v-for="item in category" :key="item.id" @click="ToList(item)">{{item.name}}</li>
            
          </ul>
        </div>
      </div>
    </div>

    </div>
  </div>
</template>

<script>
import {get} from '../../utils/request'
  export default {
    data() {
      return {
        category:[]
      }
    },
    methods:{
      getAllCategory(){
        get('/index/category/findAll').then(res =>{
          // console.log(res);
          this.category = res.data
        })
      },
      ToList(item){
        this.$router.push({
          path:'/list',
          query:item
        })
      },
      ToHome(){
        this.$router.push('/')
      },
      open() {
        this.$alert(`
        书记信箱
        E-Mail:XDWSJ@gxust.edu.cn

        校长信箱
        E-Mail:XZ@gxust.edu.cn
        `, '领导信箱', {
          confirmButtonText: '确定',
          
        });
      },
      wait(){
        this.$message({
          message: '此功能完善中，请耐心等待',
          type: 'warning'
        });
      }
    },
    created(){
      this.getAllCategory();
    }

  }
</script>

<style lang="scss" scoped>
  .Home{
    // background-color: #f5f7ff;
    // background: url('../../public/新建画布1.png') no-repeat;
    .bg{
      
      .header{
      .header_top{
          // background-color: #314999;
          height: 130px;
          box-sizing: border-box;
          
        .wrapper{
          border-bottom: 1px solid #ddd;
          display: flex;
          justify-content: space-between;
          .left{
            cursor: pointer;
            img{
              padding: 20px;
            }
          }
          .right{
            color: #fff;
            font-size: 14px;
            
            .right_top{
              ul{
                margin-top: 10px;
                // margin-bottom: 20px;
                float: right;
                li{
                  float: left;
                  line-height: 30px;
                  margin-right: 20px;
                  cursor: pointer;
                  
                }
                li:not(li:last-child)::after{
                  // color: red;
                  content: "";
                  display: inline-block;
                  vertical-align: middle;
                  margin-top: -2px;
                  margin-left: 12px;
                  width: 1px;
                  height: 12px;
                  background-color: #c2c2c2;
                  font-size: 0;
                }
              }
            }
            .slogan{
              overflow: hidden;
              display: block;
              content: '';
              margin-top: 55px;

            }
          }
        }
      }
      .header_bottom{
        .wrapper{
          
          ul{
            color: #fff;
            font-size: 20px;
            display:flex;
            justify-content: space-around;
            // font-weight: 600;
            li{
              // float: left;
              // margin-right: 70px;
              cursor: pointer;
            }
          }
        }
      }
    }
    }
  }
</style>